<template>
  <div class="customer-order-details">
    <gl-breadcrumb class="mb15"
                   text="客户管理,客户详情,订单详情"></gl-breadcrumb>
    <div class="table p20">
      <div class="title">
        <div class="name">{{$route.query.name}} <span class="sub-name">({{$route.query.pname}})</span></div>
        <div class="search flex jcb mt10 mb10">
          <div class="total wsnw">
            <span class="mr25">订单总额：{{all}}</span>
            <span class="ml25">限制机器总数：{{count}}</span>
          </div>
          <el-button type="primary"
                     @click="showAdd = true">新增订单</el-button>
        </div>
      </div>
      <gl-table @button="btnCallback"
                v-loading="loading"
                class="p20"
                :data="list"
                :columns="listLabel">

        <div slot="customer_contract_id"
             slot-scope="{row}">
          <span v-if="row.customer_contract_id"
                class="el-icon-tickets"></span>
          <span v-else>无</span>
        </div>
      </gl-table>
      <gl-pagination :curr="curr"
                     :size="limits"
                     :total="total"
                     @callback="getList"></gl-pagination>
    </div>

    <el-dialog width=""
               :title="dialogTitle"
               :visible.sync="showAdd">
      <gl-form class=""
               ref="addForm"
               must="order_name,price,num"
               :form="form"
               :form-label="formLabel">
        <el-input placeholder="请输入"
                  @blur="form.price = parseFloat(form.price) || 0"
                  v-model="form.price"
                  slot="price">
          <span slot="append"
                class="price-suffix">元</span>
        </el-input>
      </gl-form>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click="showAdd = false">取 消</el-button>
        <el-button type="primary"
                   @click="addSure">确 定</el-button>
      </div>
    </el-dialog>
    <gldelbtn :text="form.order_name"
              :show="delShow"
              @determine="delOrder"></gldelbtn>
  </div>
</template>

<script>
export default {
  name: 'CustomerOrderDetails',
  data() {
    return {
      loading: true,
      showAdd: false,
      delShow: false,

      all: 0,
      count: 0,

      total: 0,
      limits: 10,
      curr: 1,
      list: [],
      listLabel: [
        { label: '订单ID', prop: 'order_id' },
        {
          label: '订单时间',
          prop: 'create_time',
          format: val => this.tools.formatDate(val)
        },
        { label: '订单名称', prop: 'order_name' },
        { label: '开单人', prop: 'contacts' },
        {
          label: '限制机器数量',
          prop: 'num',
          format: val => this.tools.moneyNumber(val)
        },
        {
          label: '单价',
          prop: 'price',
          format: val => this.tools.moneyNumber(val, 2)
        },
        {
          label: '总金额',
          prop: 'total',
          format: val => this.tools.moneyNumber(val, 2)
        },
        {
          label: '关联合同',
          prop: 'customer_contract_id',
          slot: 'customer_contract_id'
        },
        { label: '操作', prop: 'active_time', btns: ['编辑', '删除'] }
      ],

      dialogTitle: '',
      form: { customer_contract_id: '' },
      formLabel: [
        { label: '订单名称', prop: 'order_name' },
        { label: '产品单价', prop: 'price', slot: 'price' },
        { label: '限制机器数量', prop: 'num' },
        { label: '关联合同', prop: 'customer_contract_id', options: [] },
        { label: '开单人', prop: 'contacts' }
      ]
    }
  },
  watch: {
    showAdd(val) {
      if (val) {
        this.getContractList()
        this.dialogTitle = '新增订单'
        if (this.form.order_id) {
          this.dialogTitle = '编辑订单'
        }
      } else {
        this.form = { customer_contract_id: '' }
      }
    }
  },
  created() {
    this.getList(1)
  },
  methods: {
    addSure() {
      if (!this.$refs.addForm.validate()) return
      let url = 'admin/order.api/save_order'
      this.http
        .$post(url, {
          order_name: this.form.order_name,
          order_id: this.form.order_id,
          price: this.form.price,
          num: this.form.num,
          customer_id: this.$route.query.id,
          product_id: this.$route.query.pid,
          contacts: this.form.contacts,
          customer_contract_id: this.form.customer_contract_id
        })
        .then(res => {
          this.$message.success(this.form.order_id ? '修改成功' : '添加成功')
          this.showAdd = false
          this.getList()
        })
        .catch(this.$err)
    },

    getContractList() {
      let item = this.formLabel.find(e => e.prop === 'customer_contract_id')
      if (item && item.options && !item.options.length) {
        this.http
          .$post('admin2/customer.api/customer_contract_list', {
            customer_id: this.$route.query.id
          })
          .then(res => {
            item.options = res.list.map(e => ({ label: e.name, value: e.id }))
          })
          .catch(console.log)
      }
    },
    delOrder(code, rcode) {
      if (code !== rcode) return this.$message.error('验证码不正确')
      let row = this.form
      this.http
        .$post('admin/order.api/set_status', {
          order_id: row.order_id,
          status: 2
        })
        .then(res => {
          this.$message.success('删除成功')
          if (
            Math.ceil((this.total - 1) / this.limits) < this.curr &&
            this.curr > 1
          ) {
            this.curr--
          }
          this.getList()
          this.delShow = false
        })
        .catch(this.$err)
    },
    btnCallback({ row, index }) {
      if (index) {
        // 删除
        this.form = { ...row }
        this.delShow = true
      } else {
        // 编辑
        row.customer_contract_id = row.customer_contract_id || ''
        this.form = { ...row }
        this.showAdd = true
      }
    },
    getList(init) {
      if (init) {
        if (init.curr) {
          this.curr = init.curr
          this.limits = init.size
        } else {
          this.curr = 1
        }
      }
      this.loading = true
      this.http
        .$post('admin/order.api/list_order', {
          curr: this.curr,
          limits: this.limits,
          customer_id: this.$route.query.id,
          product_id: this.$route.query.pid
        })
        .then(res => {
          this.loading = false
          this.list = res.list
          this.total = res.total
          this.all = res.price
          this.count = this.tools.moneyNumber(res.num)
        })
        .catch(e => {
          this.loading = false
          this.$err(e)
        })
    }
  }
}
</script>

<style scoped lang="less">
.customer-order-details {
}

.table {
  background-color: #fff;
  .search {
    align-items: center;
  }
  .name {
    font-size: 22px;
    font-weight: bold;
    color: #333;
  }
  .sub-name {
    font-weight: normal;
    font-size: 0.7em;
    color: #aaa;
  }
}
</style>